<template>
	<div class="page-wrapper">
		<div class="top">
			<el-row class="main">
				<el-col :span="4" class="logo">
					<el-avatar src="/public/logo.png" size="default" class="logo-avatar" :style="{ borderRadius: '4px' }"></el-avatar>
					<p>黑神话：悟空百科</p>
				</el-col>
				<el-col :span="12">
					<el-menu
						class="el-menu-popper-demo"
						mode="horizontal"
						:default-active="activeMenu"
						router
						:ellipsis="false"
						:popper-offset="16"
						style="border: none; height: 50px; background: none"
						text-color="#220202"
						active-text-color="#409EFF"
					>
						<el-menu-item index="/front/index">首页</el-menu-item>
						<el-menu-item index="/front/video/list">视频</el-menu-item>
						<el-menu-item index="/front/category">章回信息</el-menu-item>
						<el-menu-item index="/front/teach">回目攻略</el-menu-item>
						<el-sub-menu index="/front/equip">
							<template #title>披挂</template>
							<el-menu-item index="/front/equip">装备</el-menu-item>
							<el-menu-item index="/front/equip/suit">套装</el-menu-item>
						</el-sub-menu>
						<el-menu-item index="/front/npc">游戏NPC信息</el-menu-item>
						<el-menu-item index="/front/map">地图</el-menu-item>
					</el-menu>
				</el-col>
				<el-col :span="8" style="display: flex; align-items: center; justify-content: end">
					<el-avatar :src="systemStore.userInfo.avatar" :size="33" style="margin: 0 8px"></el-avatar>
					<el-dropdown style="margin: 0 10px; cursor: pointer">
						<span class="el-dropdown-link">
							{{ systemStore.userInfo.username }}
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="handleVideo">我的视频</el-dropdown-item>
								<el-dropdown-item @click="handleCollect"> 我的攻略收藏 </el-dropdown-item>
								<el-dropdown-item @click="handleVideoCollect"> 我的视频收藏 </el-dropdown-item>
								<el-dropdown-item @click="handleInformation"> 个人信息 </el-dropdown-item>
								<el-dropdown-item v-if="systemStore.userInfo.roleIds.some(role => [1, 7].includes(role))" @click="handleBack">
									进入后台界面
								</el-dropdown-item>
								<el-dropdown-item @click="handleLogOut"> 退出登录 </el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</el-col>
			</el-row>
		</div>
		<div class="container">
			<div class="container_main">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script setup>
import useSystemStore from '../../stores/system'
import router from '../../router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../../utils/request'
import { useRoute } from 'vue-router'
import { computed, onMounted, watch } from 'vue'

const $route = router
const systemStore = useSystemStore()
const route = useRoute()

const activeMenu = computed(() => {
	const { path } = route
	// 需要匹配的导航路径列表
	const menuPaths = ['/front/index', '/front/video/list', '/front/teach', '/front/equip', '/front/equip/suit', '/front/npc']
	// 查找匹配的父路径（支持子路由高亮）
	return menuPaths.find(item => path.startsWith(item)) || ''
})

const handleInformation = async () => {
	await $route.replace('/front/information')
}

const handleBack = async () => {
	await $route.replace('/home')
}

const handleVideo = async () => {
	await $route.replace('/front/video')
}

const handleCollect = async () => {
	await $route.replace('/front/collect')
}

const handleVideoCollect = async () => {
	await $route.replace('/front/collect/video')
}

const handleLogOut = async () => {
	ElMessageBox.confirm('确认退出登录?', '系统提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(async () => {
			await request.post('/auth/logout')
			await $route.replace('/login')
			systemStore.reset()
			ElMessage({
				showClose: true,
				message: '退出登录成功！',
				type: 'success'
			})
		})
		.catch(() => {})
}

onMounted(async () => {
	const { data } = await request.get('/user/' + systemStore.userInfo.id)
	systemStore.setUserInfo(data)
})

watch(
	() => route.path,
	async newPath => {
		if (newPath.startsWith('/front')) {
			const { data } = await request.get('/user/' + systemStore.userInfo.id)
			systemStore.setUserInfo(data)
		}
	}
)
</script>

<style scoped lang="scss">
.top {
	position: fixed;
	width: 100%;
	z-index: 99;
	background: rgba(211, 211, 211, 0.5);
	top: 0;
	.main {
		color: darkgray; /* 字体颜色为白色 */
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影效果 */
		font-size: 18px; /* 调整字体大小 */
		border-radius: 5px; /* 给导航栏轻微圆角 */

		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #220202;
			p {
				margin-left: 10px;
				cursor: pointer;
			}
			:deep(.logo-avatar) {
				border-radius: 4px !important;
				width: 120px;
				height: 50px;

				.el-avatar > img {
					object-fit: contain;
				}
			}
		}
	}
}

.container {
	position: relative;
	width: 100%;
	.container_main {
		width: 100%;
		height: 1000px;
	}
}

.page-wrapper {
	background: url('/public/ikon.jpg') no-repeat center center fixed;
	background-size: cover;
	position: relative;
	min-height: 100vh;
	padding-top: 64px;
}

.page-wrapper::after {
	content: '';
	display: block;
	height: 64px;
	visibility: hidden;
}
</style>
